<template>
	<view class="containner">
		<view class="mypoint">
			<view @click="gomypoint" style="display: flex;align-items: center;"><u-icon name="rmb-circle" color="#fb4525" size="36" style="margin-right: 10rpx;"></u-icon>我的积分</view>
			<view @click="myexchange" style="display: flex;align-items: center;"><u-icon name="gift" color="#fb4525" size="36" style="margin-right: 10rpx;"></u-icon>我的兑换</view>
		</view>
		<!-- 商品 -->
		<view class="title" style="padding: 20upx;">积分兑换区</view>
		<view class="waterfallWapper">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
						@tap="goDetailPage(item.pg_id)">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.pg_image"
							:index="index"></u-lazy-load>
						<view class="demo-title">{{item.pg_name}}</view>
						<!-- <view class="demo-title">{{typeof item.pg_image}}</view> -->
						<view class="ps">
							<view class="demo-price">{{item.pg_points + '积分'}}</view>
							<view class="btn">兑换</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
						@tap="goDetailPage(item.pg_id)">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.pg_image"
							:index="index"></u-lazy-load>
						<view class="demo-title">{{item.pg_name}}</view>
						<view class="ps">
							<view class="demo-price">{{item.pg_points + '积分'}}</view>
							<view class="btn">兑换</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="getPointLists"></u-loadmore>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		toRaw
	} from "vue";
	import {
		onPageScroll,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getPointList
	} from '/common/pointStore.js'
	import {
		useCounterStore
	} from '@/stores/index.js'
	let loadStatus = ref('loadmore');
	let flowList = reactive([]);

	function gomypoint() {
		uni.navigateTo({
			url: '/page/extend_earnings/extend_earnings'
		})
	}

	function myexchange() {
		uni.navigateTo({
			url: '/page/Myredemptions/Myredemptions'
		})
	}

	function goDetailPage(id) {
		uni.navigateTo({
			url: '/page/point-details/point-details?id=' + id + '&mode=point'
		})
	}
	// 获取商品列表
	function getPointLists() {
		getPointList().then(res => {
			if (res.list.length < 10) {
				loadStatus.value = 'nomore'
			}
			res.list.map(item => {
				item.pg_image = item.pg_image[0];
				flowList.push(item)
			})
			// flowList.value = res.list
		}).catch()
	}

	onShow(() => {
		flowList = []
		getPointLists()
	})
</script>

<style lang="scss" scoped>
	.containner {
		min-height: 100vh;
		background-color: #f7f7f7;
		overflow: hidden;
	}

	.title {
		padding: 0 20upx;
	}

	.waterfallWapper {
		background-color: #f7f7f7;
	}

	$fcolor: #fb4525;

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #fff;
		padding: 8px;
		position: relative;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
		word-break: break-all;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.ps {
		overflow: hidden;
	}

	.demo-price {
		float: left;
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.btn {
		float: right;
		font-size: 26rpx;
		color: $fcolor;
		margin-top: 5px;
	}

	.mypoint {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 10upx;
		margin: 20upx;
		padding: 44upx 0;
	}
</style>